<template>
  <div id="role-privileges">
    <div class="card">
      <div class="card-body">
        <form class="row">
          <div class="col-2">
            <select class="form-select" v-model="roleName">
              <template v-for="role in roles">
                <option :value="role.role" :key="`role-` + role.id">
                  {{ role.roleName }}/{{ role.role }}
                </option>
              </template>
            </select>
          </div>
          <div class="col-1">
            <select class="form-select" v-model.number="sc.pageSize">
              <option value="10">10</option>
              <option value="20">20</option>
              <option value="50">50</option>
              <option value="100">100</option>
            </select>
          </div>

          <div class="col">
            <button
              type="button"
              class="btn btn-primary"
              @click.stop="search()"
            >
              查找
            </button>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-6">
        <table class="table table-sm table-bordered table-hover">
          <caption style="caption-side: top">
            已拥有
          </caption>
          <thead>
            <tr>
              <th></th>
              <th>role</th>
              <th>res_id</th>
              <th>res_content</th>
              <th>res_remark</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(info, index) in dataList" :key="`role-priviledge-` + info.id">
              <td>{{ index + 1 }}</td>
              <td>{{ info.role }}</td>
              <td>{{ info.resId }}</td>
              <td>{{ info.resContent }}</td>
              <td>{{ info.resRemark }}</td>
              <td>
                <a
                  href="javascript:void(0)"
                  @click.stop="deleteRolePrivilege(info.id)"
                  class="text-danger"
                  >移除</a
                >
              </td>
            </tr>
          </tbody>
        </table>
        <nav id="pagination-box" class="float-end">
          <my-pagination
            name="pagination"
            :row-count="sc.rowCount"
            :page-total="sc.pageTotal"
            :page-no="sc.pageNo"
            @next-page="nextPage"
            @prev-page="prevPage"
            @direct-page="directPage"
          ></my-pagination>
        </nav>
      </div>

      <div class="col-6">
        <table class="table table-striped table-sm">
          <caption style="caption-side: top">
            未拥有
          </caption>
          <thead>
            <tr>
              <th></th>
              <th>res_id</th>
              <th>res_content</th>
              <th>res_remark</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(info, index) in filteredPrivileges" :key="`privilege-` + info.id">
              <td>{{ index + 1 }}</td>
              <td>{{ info.resId }}</td>
              <td>{{ info.resContent }}</td>
              <td>{{ info.resRemark }}</td>
              <td>
                <a
                  href="javascript:void(0)"
                  @click.stop="addRolePrivilege(info.id)"
                  class="text-success"
                  >增加</a
                >
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import {
  addRolePrivilege,
  deleteRolePrivilege,
  searchRolePrivileges,
  searchRoles,
  searchPrivileges,
} from "@/api/groups.js";
import MyPagination from "@/components/my-pagination.vue";

export default {
  components: {
    MyPagination,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 100,
        pageTotal: 0,
      },
      roleName: "",

      dataList: [],
      roles: [],
      privileges: [],

      privilegeIds: [],
    };
  },
  computed: {
    filteredPrivileges: function () {
      let self = this;
      return this.privileges.filter(function (p) {
        let b = true;
        for (let rp of self.dataList) {
          if (rp.resId === p.resId) {
            b = false;
            break;
          }
        }

        return b;
      });
    },
  },
  mounted: function () {
    this.searchRoles();
    this.searchPrivileges();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      if (this.roleName === "") {
        return;
      }
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.name": this.roleName,
      };
      searchRolePrivileges(params, (jsonResult) => {
        this.dataList = jsonResult.dataList;
        this.sc = jsonResult.page;
      });
    },
    searchPrivileges: function () {
      searchPrivileges((v) => {
        // console.log(v)
        this.privileges = v;
      });
    },
    deleteRolePrivilege: function (id) {
      deleteRolePrivilege(id, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg("删除成功");
          this.search();
        }
      });
    },
    addRolePrivilege: function (id) {
      if (this.roleName === "") {
        return;
      }
      this.privilegeIds.splice(0);
      this.privilegeIds.push(id);
      const params = {
        role: this.roleName,
        privilegeIds: this.privilegeIds,
      };
      addRolePrivilege(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.search();
          this.showErrMsg("增加成功.");
        } else {
          this.showErrMsg("失败了!" + jsonResult.errMsg);
        }
      });
    },
    searchRoles: function () {
      if (this.roles.length === 0) {
        searchRoles((jsonResult) => {
          this.roles = jsonResult;
        });
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
